會透過指令來新增或刪除 DOM 元素和改變 DOM 結構,例如 ngIf
、ngFor
或 ngSwitch
皆可控制 DOM 結構。
ngSwitch
前面不要加 *
星號。ngIf
、ngFor
、ngSwitchDefault
以及 ngSwitchCase
前面要加上 *
星號。目前有六個圓形,編號為 1~6,透過 ngIf 指令,要完成以下事情,
首先建立 html 所需要的內容。
app.component.html
<h2>ngIf</h2>
<button>click</button>
<ul>
<li><a class="circle red" href="#">1</a></li>
<li><a class="circle orange" href="#">2</a></li>
<li><a class="circle yellow" href="#">3</a></li>
</ul>
<ul>
<li><a class="circle green" href="#">4</a></li>
<li><a class="circle blue" href="#">5</a></li>
<li><a class="circle purple" href="#">6</a></li>
</ul>
因為是基偶數更換時,要更換一組 ul
,所以 ngIf
要寫在 ul
標籤上,就會變成下方程式碼,並且帶入上一篇寫過的 addCounter()
的方法。。
<h2>ngIf</h2>
<button (click)="addCounter()">click</button>
<ul *ngIf="counter % 2 == 0">
<li><a class="circle red" href="#">1</a></li>
<li><a class="circle orange" href="#">2</a></li>
<li><a class="circle yellow" href="#">3</a></li>
</ul>
<ul *ngIf="counter % 2 == 1">
<li><a class="circle green" href="#">4</a></li>
<li><a class="circle blue" href="#">5</a></li>
<li><a class="circle purple" href="#">6</a></li>
</ul>
app.component.ts
export class AppComponent {
counter = 0;
constructor() {}
addCounter() {
this.counter++;
}
}
app.component.css
不在本次陳述重點,又因為有點長,故不贅述。
ngIf
是會移除整個 template
的內容,並不是單純隱藏,所以包含在 ngIf
中的 template
,會因為此指令關係整個都會被移除或新增回來,在使用上要注意此規則。
https://stackblitz.com/edit/angular-ivy-hhxay5?file=src/app/app.component.html
感謝大大的系列文章
對我這個初學者獲益良多
文章內的 基數 -> 奇數
以及
擊次數為基數時,留下 1~3 的圓形。
點擊次數為偶數時,留下 4~6 圓形。
要改成 點擊次數......
希望這篇系列文能更好~
感謝有各位大大的用心能讓後輩們持續精進